<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-row>
        <el-col :span="8">
          <el-form-item label="员工账号:">
            <el-input
              v-model="form.employeeNumber"
              placeholder="员工账号:"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="员工姓名:">
            <el-input v-model="form.name" placeholder="员工姓名:"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作模式">
            <el-select placeholder="请选择" v-model="form.workPatternId">
              <el-option
                v-for="item in weekList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="月份">
            <el-date-picker
              type="month"
              placeholder="选择月"
              v-model="form.month"
              value-format="yyyy-MM"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
       <el-form-item label="所属机构">
        <el-cascader
          v-model="form.endAgencyId"
          :options="options"
          :props="props"
          :filterable="true"
          placeholder="所属机构"
        ></el-cascader>
       </el-form-item>
          
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="">
      <el-button
        type="danger"
        @click="$router.push('/transit/workArrange-setting')"
        >排版设置</el-button
      >
      <el-button type="danger" @click="bound">绑定排版</el-button>
      <el-table
        :data="tableData"
        style="width: 100%; font-size: 13px"
        @selection-change="selection"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          fixed
          prop="employeeNumber"
          label="员工账号"
          width="100"
        >
        </el-table-column>
        <el-table-column fixed prop="name" label="员工姓名" width="100">
        </el-table-column>
        <el-table-column fixed prop="phone" label="员工电话" width="110">
        </el-table-column>
        <el-table-column
          fixed
          prop="userType"
          label="员工角色"
          width="100"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="workPatternName"
          label="当前工作模式"
          width="110"
        >
        </el-table-column>
        <el-table-column
          :prop="`workSchedules[${index}]`"
          :label="`${index + 1}`"
          v-for="(item, index) in workSchedules[0]"
          :key="item.id"
          :formatter="matter"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="人工调整"
      :visible.sync="dialogVisible"
      width="40%"
      @close="close"
    >
      <el-radio v-model="radio" label="1" @input="cahnge">礼拜制</el-radio>
      <el-radio v-model="radio" label="2" @input="cahnge">连续制</el-radio>
      <span>模式名称</span>
      <el-select v-model="weekvalue" placeholder="请选择">
        <el-option
          v-for="item in weekList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="putwork">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { gettreeApi } from '@/api/register';
import { getmoshiapi, getlistapi } from '@/api/workArrange-manage'
 import {PUTworkSchedulingsApi} from '@/api/setting'
export default {
  name: "workArrange-manage",
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10,
        workPatternId: "",
        name: "",
        employeeNumber: "",
        month: "",
        agencyId: "",
        
      },
      weekList1:[],
      props: {
        expandTrigger: "hover",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      value: "",
      options: [],
      tableData: [{}],
      total: 0,
      workSchedules: [],
      dialogVisible: false,
      radio: "1",
      weekList: [],
      weekvalue: "",
      userIdList: [],
    };
  },
  created() {
    this.work()
  },
  methods: {
    async work() {
      const res = await gettreeApi(this.form)
      console.log(res);
      this.options = JSON.parse(res.data)
      const res1 = await getmoshiapi()
      console.log(res1);
      this.weekList = [...res1.data[1], ...res1.data[2]]
      const res3 = await getlistapi(this.form)
      this.tableData = res3.data.items
      this.total = +res3.data.counts
      this.workSchedules = this.tableData.map((item) => {
      // console.log(item.workSchedules);
        return item.workSchedules
      })
      console.log(this.workSchedules);
      
      

    },
    handleCurrentChange(num) {
      this.form.page = num
      this.work()
    },
    formatter(a, b, c) {
      if (c==1) {
        return '员工'
      } else if (c==2) {
        return '快递员'
      } else {
        return '司机'
      }
    },
    matter(a, b, c) {
      if (c) {
  return '上'
      } else {
  return '休'
 }
    },
    async search() {
      const res = await getlistapi(this.form)
      console.log(res);
      this.tableData=res.data.items
    },
    reset() {
      this.form = {};
      this.work()
    },
    //绑定排版
    async bound() {
      if (!this.userIdList.length) {
        this.$message('没有数据')
      } else {
        
        this.dialogVisible=true
      }
    },
    close() {
      this.dialogVisible=false
    },
    async cahnge() {
     
    },
    //人工调整
    async putwork() {
      await PUTworkSchedulingsApi({
        userIdList: this.userIdList,
        workPatternId:this.userIdList.workPatternId,
        workPatternType:this.radio
     })
    },
    //获取tanle选中的数据
    selection(a) {
      console.log(a);
     this.userIdList=a
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form.demo-form-inline.el-form--inline {
  height: 200px;
  background-color: #fff;
  padding: 20px;
}
</style>